import React, { PureComponent } from 'react'
import { connect } from 'react-redux/es/exports';
import { Link } from 'react-router-dom';
import { actionCreator  } from '../store';
import { 
    ListItem,
    ListInfo,
    LoadMore } from '../style'
class List extends PureComponent {
    render() {
        const { articleList,getMoreList,page } = this.props;
        return (
            <div>
                {
                articleList.map((item,index) => {
                    return (
                        <Link 
                        key={index}
                        to={`/detail/${item.get('id')}`}>
                            <ListItem >
                                <img 
                                className='list-img'
                                src={item.get('imgUrl')} alt="" />
                                <ListInfo>
                                    <h3 className='title'>{item.get('title')}</h3>
                                    <p className='desc'>{item.get('desc')}</p>
                                </ListInfo>
                            </ListItem>
                        </Link>
                    )
                })
                }

                <LoadMore onClick={() => getMoreList(page) }>加载更多</LoadMore>
            </div>
            
        )
    }
}

const mapState = (state) => ({
    articleList: state.getIn(['home','articleList']),
    page: state.getIn(['home','articlePage'])
})

const mapDispatch = (dispatch) => ({
    getMoreList(page) {
        dispatch(actionCreator.getMoreList(page))
    }
})
export default connect(mapState, mapDispatch)(List)
